<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>2016.11.3映纷创意</title>
    <meta name="viewport" content="woidth=device-width,user-scable=no,initial-scale=1.0max">
    <link rel="stylesheet" href="css/index.css" media="screen" title="no title" charset="utf-8">
    <style media="screen">
     @media only screen and (min-width: 300px) and (max-width: 400px){
      .wrap{
        width: 100%;
      }
      .head img{
        width: 20%;
      }
      .head nav{
        font-size: 12px;
      }
      a{
        width: 10%;
        margin: 0 1%;
      }
      .content{
        margin-top: -10%;
        font-size: 12px;
      }
      .aboutMe{
        font-size: 12px;
        padding: 10px 0px;
      }
      .cell{
        width: 28%;
      }
      .cell img{
        height: 60px;
      }
      .bottomTitle{
        height: 30px;
        font-size: 12px;
        line-height: 13px;
        padding-top: 3px;
      }
      .mask2{
        height: 60px;
      }
      .text2 h1{
        font-size: 15px;
      }
      .text2 h4{
        font-size: 12px;

      }
      .text2{
        width: 100%;
        position: absolute;
        top:10%;
        left:0px;
      }
      }
      @media only screen and (min-width: 400px) and (max-width: 500px){
       .head{
         width: 100%;
       }
       .head img{
         width: 30%;
       }
       .head nav{
         width: 100%;
       }
        a{
          font-size: 15px;
          margin: 0px 10px;
        }
        .cooperation img{
          width: 13%;
        }
       .cell{
         width: 45%;
         margin: 5px 1%;
       }
       .cell img{
         height: 100px;
       }
      .mask2{
        height: 100px;
      }
      .text2 h1{
        font-size: 15px;
        margin-bottom: 5px;
      }
       .text2 h4{
         font-size: 12px;
       }
       .bottomTitle{
         font-size: 15px;
       }
     }
    </style>
  </head>
  <body>
    <!-- 最外层 -->
    <div class="wrap">
      <!-- 头部 -->
      <div class="head">
        <img src="img/title2.png" alt="网站logo" />
        <nav>
          <a href="#">HOME</a>
          <a href="#">WORK</a>
          <a href="#">CONTANT</a>
          <a href="#">JOIN US</a>
        </nav>
      </div>
      <!-- 内容 -->
      <div class="content">
       <!-- 轮播图 -->
       <div class="scrollImg">
         <!-- 图片 -->
         <img src="img/1-150R1110012339.jpg" alt="" />
         <!-- 黑色遮罩 -->
         <div class="mask1">

         </div>
         <!-- 文字 -->
         <div class="text1">
             健康饮食
         </div>
         <!-- 页面控制 -->
         <div class="pageControl">
           <span></span>
           <span></span>
           <span></span>
           <span></span>
           <span></span>
           <span></span>
         </div>
       </div>
       <!-- 关于我们 -->
       <div class="aboutMe">
         Infini Studio (映纷创意)是一家创意机构，专注于动画影像的创意与设计。我们使用设计、
         绘画、动画、特效及多种创新形式（Motion Graphics），以动态视觉语言对品牌与内容进行
         创意呈现。并由多名动画导演、设计师、插画师、三维艺术家共同协作完成。
       </div>
       <!-- 合作商 -->
       <div class="cooperation">
        <img src="img/1.jpg" alt="" />
        <img src="img/2.jpg" alt="" />
        <img src="img/3.jpg" alt="" />
        <img src="img/4.jpg" alt="" />
        <img src="img/5.jpg" alt="" />
        <img src="img/6.jpg" alt="" />
        <img src="img/7.jpg" alt="" />
        <img src="img/8.jpg" alt="" />
        <img src="img/9.jpg" alt="" />
        <img src="img/10.jpg" alt="" />
        <img src="img/11.jpg" alt="" />
        <img src="img/12.jpg" alt="" />
        <img src="img/13.jpg" alt="" />
        <img src="img/14.jpg" alt="" />
       </div>
       <!-- 瀑布流 -->
       <div class="waterFlow">
        <!-- 左侧 -->
        <div class="cell">
          <img src="img/1-15052GG2400-L.jpg" alt="" />
          <div class="mask2"></div>
          <div class="text2">
            <h1>季录</h1>
            <h4>成长记系列纪录片</h4>
          </div>
          <div class="bottomTitle">
            成长记系列纪录片
          </div>
        </div>
        <!--中部  -->
        <div class="cell cellMiddle">
          <img src="img/1-15052GG2400-L.jpg" alt="" />
          <div class="mask2"></div>
          <div class="text2">
            <h1>季录</h1>
            <h4>成长记系列纪录片</h4>
          </div>
          <div class="bottomTitle">
            成长记系列纪录片
          </div>
        </div>
        <!-- 右侧 -->
        <div class="cell">
          <img src="img/1-15052GG2400-L.jpg" alt="" />
          <div class="mask2"></div>
          <div class="text2">
            <h1>季录</h1>
            <h4>成长记系列纪录片</h4>
          </div>
          <div class="bottomTitle">
            成长记系列纪录片
          </div>
        </div>
        <!-- 左侧 -->
       <div class="cell">
        <img src="img/1-15052GG2400-L.jpg" alt="" />
         <div class="mask2"></div>
         <div class="text2">
           <h1>季录</h1>
           <h4>成长记系列纪录片</h4>
         </div>
         <div class="bottomTitle">
           成长记系列纪录片
         </div>
       </div>
       <!--中部  -->
       <div class="cell cellMiddle">
         <img src="img/1-15052GG2400-L.jpg" alt="" />
         <div class="mask2"></div>
         <div class="text2">
           <h1>季录</h1>
           <h4>成长记系列纪录片</h4>
         </div>
         <div class="bottomTitle">
           成长记系列纪录片
         </div>
       </div>
       <!-- 右侧 -->
       <div class="cell">
         <img src="img/1-15052GG2400-L.jpg" alt="" />
         <div class="mask2"></div>
         <div class="text2">
           <h1>季录</h1>
           <h4>成长记系列纪录片</h4>
         </div>
         <div class="bottomTitle">
           成长记系列纪录片
         </div>
       </div>
       <!-- 左侧 -->
       <div class="cell">
         <img src="img/1-15052GG2400-L.jpg" alt="" />
         <div class="mask2"></div>
         <div class="text2">
           <h1>季录</h1>
           <h4>成长记系列纪录片</h4>
         </div>
         <div class="bottomTitle">
           成长记系列纪录片
         </div>
       </div>
       <!--中部  -->
       <div class="cell cellMiddle">
         <img src="img/1-15052GG2400-L.jpg" alt="" />
         <div class="mask2"></div>
         <div class="text2">
           <h1>季录</h1>
           <h4>成长记系列纪录片</h4>
         </div>
         <div class="bottomTitle">
           成长记系列纪录片
         </div>
       </div>
       <!-- 右侧 -->
       <div class="cell">
         <img src="img/1-15052GG2400-L.jpg" alt="" />
         <div class="mask2"></div>
         <div class="text2">
           <h1>季录</h1>
           <h4>成长记系列纪录片</h4>
         </div>
         <div class="bottomTitle">
           成长记系列纪录片
         </div>
       </div>
        <!-- 左侧 -->
       <div class="cell">
         <img src="img/1-15052GG2400-L.jpg" alt="" />
         <div class="mask2"></div>
         <div class="text2">
           <h1>季录</h1>
           <h4>成长记系列纪录片</h4>
         </div>
         <div class="bottomTitle">
           成长记系列纪录片
         </div>
       </div>
       <!--中部  -->
       <div class="cell cellMiddle">
         <img src="img/1-15052GG2400-L.jpg" alt="" />
         <div class="mask2"></div>
         <div class="text2">
           <h1>季录</h1>
           <h4>成长记系列纪录片</h4>
         </div>
         <div class="bottomTitle">
           成长记系列纪录片
         </div>
       </div>
       <!-- 右侧 -->
       <div class="cell">
        <img src="img/1-15052GG2400-L.jpg" alt="" />
         <div class="mask2"></div>
         <div class="text2">
           <h1>季录</h1>
           <h4>成长记系列纪录片</h4>
         </div>
         <div class="bottomTitle">
           成长记系列纪录片
         </div>
        </div>
       </div>
      </div>
      <!-- 尾部 -->
      <div class="foot">
        <!-- 尾部左侧 -->
      <div class="footLeft">
        <img src="img/contact1.jpg" alt="" />
        <img src="img/contact2.jpg" alt="" />
        <img src="img/contact3.jpg" alt="" />
      </div>
      <!-- 尾部右侧 -->
      <div class="footRight">
        <img src="img/footer_logo.jpg" alt="" />
        <ul>
          <li>Infini Studio | 映纷创意</li>
          <li>北京市朝阳区常营</li>
          <li>Email : infinistudio@foxmail.com</li>
          <li>QQ : 7585917</li>
          <li>weibo : @InfiniStudio</li>
        </ul>
      </div>
      </div>
    </div>
  </body>
</html>
